<?php
include 'logic_layer.php';

if (!isset($_SESSION)) {
    session_start();
}

//make sure the session starts from the index page
//and that the session step matched current page
if (!isset($_SESSION["step"]) || $_SESSION["step"] != "outline") {
    header('Location: index.php');
}
?>

<!DOCTYPE html>
<html>
    <head>
        <title>Outline</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Bootstrap -->
        <link href="assets/js/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
        <!-- Main -->
        <link href="main.css" rel="stylesheet" media="screen">

    </head>

    <body>
        <!-- Part 0: Steps -->
        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="steps">
                    <p class="steps-done">Welcome &#10140; </p>
                    <p class="step-current">Outline</p>
                    <p class="steps-pending"> &#10140; Personality Test &#10140; IFTTT Tutorial &#10140; Creating a Recipe &#10140; Questionnaire</p>
                </div>
            </div>
        </div>

        <!-- Part 1: Wrap all page content here -->
        <!-- Begin page content -->
        <div class="container">
            <br><br>

            <p class="lead">Here is an outline of what you are going to do in this experiment (hover the mouse on each part to see a brief description of it).</p>

            <br><br><br>
            <div id="outlinecontainer">
                <ul>
                    <li><a href="#" onmouseover="showInfo('You will do a personality test containing 44 questions (<b>approximately 5 minutes</b>).')" onmouseleave="showInfo('The whole session will last <b>approximately 25 minutes</b>.\n ')">Personality Test</a></li>
                    <li><a href="#" onmouseover="showInfo('You will be given a short tutorial on IFTTT (<b>approximately 5 minutes</b>).\n ')" onmouseleave="showInfo('The whole session will last <b>approximately 25 minutes</b>.\n ')">IFTTT Tutorial</a></li>
                    <!--<li><a href="#" onmouseover="showInfo('You will rate a number of IFTTT recipes based on your interest level (<b>approximately 10 minutes</b>).')" onmouseleave="showInfo('The whole session will last <b>approximately 30 minutes</b>.\n ')">Rating Recipes</a></li>-->
                    <li><a href="#" onmouseover="showInfo('You will create an IFTTT recipe of your own (<b>approximately 10 minutes</b>).')" onmouseleave="showInfo('The whole session will last <b>approximately 25 minutes</b>.\n ')">Creating a Recipe</a></li>
                    <li><a href="#" onmouseover="showInfo('You will fill out two short questionnaires reflecting on your feelings and experiences associated with the previous step (<b>approximately 5 minutes</b>).')" onmouseleave="showInfo('The whole session will last <b>approximately 25 minutes</b>.\n ')">Questionnaire</a></li>
                </ul>
            </div>

            <br><br>
            <pre><p id="description" class="text-center">The whole session will last <b>approximately 25 minutes</b>.
            </p></pre>

            <br>
            <button class="btn btn-success btn-large" onclick="continueStudy();" type="button">Continue</button>
        </div>


        <form action='index.php' method='post' name='frm'>
            <input type='hidden' value='pt' name="step" />
        </form>


        <!-- Le javascript
        ================================================== -->
        <script src="assets/js/jquery/jquery-2.0.3.min.js"></script>
        <script src="assets/js/bootstrap/js/bootstrap.min.js"></script>
        <script src="assets/js/bootbox/bootbox.min.js"></script>

        <script>
                var continueStudy = function() {
                    // go to the next step
                    document.frm.submit();
                }

                var showInfo = function(msg) {
                    $("#description").html(msg);
                }
        </script>
    </body>
</html>
